<template>
  <div class="cron-edit-container">
    <el-tabs type="border-card">
      <!--秒-->
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date" /> 秒 </span>
        <common-view
          ref="second"
          view-type="second"
          :displayData="inverseAnalysisData.second"
          @change="cronChange"
        />
      </el-tab-pane>
      <!--分-->
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date" /> 分 </span>
        <common-view
          ref="minute"
          view-type="minute"
          :displayData="inverseAnalysisData.minute"
          @change="cronChange"
        />
      </el-tab-pane>
      <!--时-->
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date" /> 时 </span>
        <common-view
          ref="hour"
          view-type="hour"
          :displayData="inverseAnalysisData.hour"
          @change="cronChange"
        />
      </el-tab-pane>
      <!--天-->
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date" /> 天 </span>
        <day
          ref="day"
          :displayData="inverseAnalysisData.day"
          @change="cronChange"
        />
      </el-tab-pane>
      <!--月-->
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date" /> 月 </span>
        <common-view
          ref="month"
          view-type="month"
          :displayData="inverseAnalysisData.month"
          @change="cronChange"
        />
      </el-tab-pane>
      <!--周-->
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date" /> 周 </span>
        <week
          ref="week"
          :displayData="inverseAnalysisData.week"
          @change="cronChange"
        />
      </el-tab-pane>
      <!--年-->
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date" /> 年 </span>
        <common-view
          ref="year"
          view-type="year"
          :displayData="inverseAnalysisData.year"
          @change="cronChange"
        />
      </el-tab-pane>
    </el-tabs>
    <cron-area :cron-data="cronData" />
  </div>
</template>
<script>
  import commonView from "./components/CommonView";
  import day from "./components/Day"
  import week from "./components/Week"
  import cronArea from "./components/CronArea"
  export default {
    name: 'CronGenerator',
    components: {
      "day":day,
      "week":week,
      "cron-area":cronArea,
      "common-view":commonView
    },
    data(){
      return {
        cronData: [
          {
            name:"second",
            text:"秒",
            value: "*",
            sortNum:1,
          },
          {
            name:"minute",
            text:"分",
            value: "*",
            sortNum:2,
          },
          {
            name:"hour",
            text:"时",
            value: "*",
            sortNum:3,
          },
          {
            name:"day",
            text:"天",
            value: "*",
            sortNum:4,
          },
          {
            name:"month",
            text:"月",
            value: "*",
            sortNum:5,
          },
          {
            name:"week",
            text:"周",
            value: "?",
            sortNum:6,
          },
          {
            name:"year",
            text:"年",
            value: "*",
            sortNum:7,
          }
        ],
        timer: null, // 节流防止数据变更太频繁
        inverseAnalysisData: { // 回显的数据
          second:'', // 秒
          minute:'', // 分
          hour:'', // 时
          day:'', // 天
          month:'', // 月
          week:'', // 周
          year:'', // 年
        }
      }
    },
    props: ['inverseAnalysis'], // 回显数据
    created() {
      this.initInverseAnalysis()
    },
    methods: {
      // 初始化回显数据
      initInverseAnalysis() {
        if(this.inverseAnalysis) {
          let arr = this.inverseAnalysis.split(' ')
          if(arr.length) {
            this.inverseAnalysisData.second = arr[0] || '';
            this.inverseAnalysisData.minute = arr[1] || '';
            this.inverseAnalysisData.hour = arr[2] || '';
            this.inverseAnalysisData.day = arr[3] || '';
            this.inverseAnalysisData.month = arr[4] || '';
            this.inverseAnalysisData.week = arr[5] || '';
            this.inverseAnalysisData.year = arr[6] || '';
          }
        }
      },
      // 选择的数据变更
      cronChange(d, type){
        if(d === ''){
          this.extractData("?", type)
        }else{
          this.extractData(d, type)
        }
        // 如果选择的是通配的话
        if(d === "*") {
          if(type === 'second') {
            this.setRadioType({minute: "1", hour: "1", day: "1", month: "1", week: "0", year: "1"})
          }
          if(type === 'minute') {
            this.setRadioType({hour: "1", day: "1", month: "1", week: "0", year: "1"})
          }
          if(type === 'hour') {
            this.setRadioType({day: "1", month: "1", week: "0", year: "1"})
          }
          if(type === 'day') {
            this.setRadioType({month: "1", week: "0", year: "1"})
          }
          if(type === 'month') {
            this.setRadioType({week: "0", year: "1"})
          }
          if(type === 'week') {
            this.setRadioType({day: "0", year: "1"})
          }
        }else {
          let obj = {
            second: this.getCronItem('second').value,
            minute: this.getCronItem('minute').value,
            hour: this.getCronItem('hour').value,
            day: this.getCronItem('day').value,
            month: this.getCronItem('month').value,
            week: this.getCronItem('week').value,
            year: this.getCronItem('year').value
          }
          if(type === 'minute') {
            if(obj.second === "*"){
              this.setRadioType({second: "3"})
            }
          }
          if(type === 'hour') {
            if(obj.minute === "*"){
              this.setRadioType({minute: "3"})
            }
          }
          if(type === 'day') {
            if(obj.day !== "?"){
              this.setRadioType({week: "0"})
            }
            if(obj.hour === "*"){
              this.setRadioType({hour: "3"})
            }
          }
          if(type === 'month') {
            if(obj.day === "*"){
              this.setRadioType({day: "3"})
            }
          }
          if(type === 'week') {
            if(obj.week !== "?"){
              this.setRadioType({day: "0"})
              if(obj.month === "*"){
                this.setRadioType({month: "3"})
              }
            }
          }
          if(type === 'year') {
            if(obj.month === "*"){
              this.setRadioType({month: "3"})
            }
          }
        }
      },
      // 获取value
      getValue(){
        let arr = []
        this.cronData.forEach((obj) => {
          arr.push(obj.value)
        })
        return arr.join(" ")
      },
      // 获取某一项
      getCronItem(name){
        let cLength = this.cronData.length;
        for(let i = 0; i < cLength; i++){
          let item = this.cronData[i];
          if(item.name === name) {
            return item;
          }
        }
      },
      // 更改某一项的value
      extractData(value, name) {
        let cLength = this.cronData.length;
        for(let i = 0; i < cLength; i++) {
          let item = this.cronData[i];
          if(item.name === name) {
            item.value = value
            this.emitValue()
            break
          }
        }
      },
      // 发出事件
      emitValue() {
        let that = this;
        if(this.timer !== null) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(function () {
          that.$emit("change", that.getValue())
        },200)
      },
      // 更改子组件的radioType
      setRadioType(obj){
        for(const key in obj){
          this.$refs[key].selectData.radioType = obj[key]
        }
      }
    }
  };
</script>
<style scoped>
  .cron-edit-container{
    width: 100%;
    text-align: left;
  }
  .cron-edit-container .el-tabs {
    box-shadow: none;
  }
</style>